<template>
  <div class="mt-5 bg-blue-300 p-5" title="父组件" :can-expan="false">
    <h3>子组件</h3>
    <ul>
      <li>id:{{ id }} </li>
      <li>familyName:{{ familyName }} <Button @click="changeFamilyName">ref修改</Button></li>
      <li>name:{{ name }} <Button @click="changeName">action修改</Button></li>
      <li>fullName:{{ getFullName }} <Button @click="changeFullName">$path修改</Button></li>
      <li><Button @click="doReset">$reset重置</Button></li>
    </ul>
  </div>
</template>
<script lang="ts" setup>
  import { storeToRefs } from 'pinia';
  import { Button } from '@/components/Button';

  import { useMessage } from '@/hooks/web/useMessage';

  // 1.引入自定义 store 组件
  import { useTestStore } from '@/store/modules/testTraditional';

  const { createMessage } = useMessage();

  // 2.调用 store，获取暴露的对象: {states, getters, acctions}
  const testStore = useTestStore();

  // 3.解构 state 数据, 使用 pinia 的 storeToRefs 而非 vue 的 toRefs
  const { id, familyName, name, getFullName } = storeToRefs(testStore);

  // 修改方式一: 引用对象直接修改
  function changeFamilyName() {
    // 直接操作引用对象修改
    familyName.value += '~';
  }

  // 修改方式二: 使用自定义 action 方式修改
  function changeName() {
    // 调用 store 的 action 修改
    testStore.updateName(name.value + '*-');
  }

  // 修改方式三: 使用内置变量 $patch 修改, 原子性
  function changeFullName() {
    testStore.$patch({
      familyName: 'li',
      name: 'si',
    });
  }

  function doReset() {
    testStore.$reset();
  }

  // 监听 state 状态变化
  testStore.$subscribe((mutation, state) => {
    console.log('mutation', mutation);
    console.log('state', state);

    createMessage.error('父组件: 变更id:' + mutation.storeId + ', 变更内容:' + JSON.stringify(state));
  });
</script>

<style lang="less" scoped>
  button {
    margin-left: 5px;
  }

  li {
    margin-top: 10px;
  }

  div {
    border-radius: 10px;
  }
</style>
